<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          <el-row :gutter="30">
            <el-col :span="7">
              <el-input placeholder="客户姓名" v-model="condition.customerName" clearable @clear="query" size="large">
                <template #append>
                  <el-button type="info" @click="query" style="color:black">查询</el-button>
                </template>
              </el-input>
            </el-col>
            <el-col :span="17">
              <el-button type="primary" @click="dj" color="#337ab7" style="margin-top:4px">
                <el-icon>
                  <Plus />
                </el-icon>
                <span>登记</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-divider style="margin:0"></el-divider>
      <el-main>
        <div>
          <el-row class="mb-4">
            <el-button :class="[{ activeBtn: btnFlag1 }]" style="border: 1px white solid;margin-left: 0px"
              @click="selfCareMan">自理老人</el-button>
            <el-button :class="[{ activeBtn: btnFlag2 }]" style="border: 1px white solid;margin-left: 0px"
              @click="careMan">护理老人</el-button>
            <!-- <el-button
              :class="[{activeBtn: btnFlag3}]"
              style="border: 1px white solid;margin-left: 0px"
              @click="historyMan"
            >历史老人</el-button> -->
          </el-row>
        </div>
        <div>
          <!-- 表格 -->
          <el-table :data="khxxList" style="width: 100% ;color:black;" stripe>
            <el-table-column align="center" fixed type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column align="center" fixed prop="customerName" label="客户姓名" width="100" />
            <el-table-column align="center" prop="bloodType" label="血型" width="60" />
            <el-table-column align="center" prop="contactTel" label="联系电话" width="150" />
            <el-table-column align="center" prop="customerAge" label="年龄" width="60" />
            <el-table-column align="center" prop="customerSex" label="性别" width="60">
              <template #default="scope">{{ scope.row.customerSex == 0 ? '男' : '女' }}</template>
            </el-table-column>
            <el-table-column align="center" prop="familyMember" label="家属" width="100" />
            <el-table-column align="center" prop="idcard" label="身份证号" width="180" />
            <el-table-column align="center" prop="buildingNo" label="所属楼房" width="80" />
            <el-table-column align="center" prop="roomNo" label="房间号" width="80" />
            <el-table-column align="center" prop="bedNo" label="床号" width="80" />
            <el-table-column align="center" prop="birthday" label="出生日期" width="150" />
            <el-table-column align="center" prop="checkinDate" label="入住时间" width="150" />
            <el-table-column align="center" prop="expirationDate" label="合同到期时间" width="150" />
            <el-table-column align="center" prop="levelName" label="护理级别" width="80" />
            <el-table-column align="center" prop="nickName" label="健康管家(护工)" width="120" />
            <el-table-column align="center" prop="psychosomaticState" label="身心状况" width="200" />
            <el-table-column align="center" fixed="right" label="操作" width="180">
              <template #default="scope">
                <el-button type="danger" link size="small" v-if="scope.row.isDeleted == 1">逻辑上已删除,只查询不操作</el-button>
                <el-button type="danger" link v-if="scope.row.isDeleted == 0" @click="del(scope.row)">删除</el-button>
                <el-button type="primary" link v-if="scope.row.isDeleted == 0" @click="edit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页插件 -->
        <div style="margin-top:15px">
          <!-- 
              page-size:每页显示条目个数
              current-page:页码 配合@current-change使用
              disabled:是否禁用分页 
              background:是否为分页按钮添加背景色
              layout:组件布局，子组件名用逗号分隔
              total:总条目数

          -->
          <el-pagination :page-size="page.pageSize" background :current-page="page.currentPag"
            layout=" prev, pager, next" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-main>
      <!-- 模态框 :入住登记-->
      <el-dialog v-model="djDialog.dialogVisible" :title="djDialog.tops" width="60%" align-center draggable
        :before-close="djhandleClose">
        <el-divider border-style="double" style="margin:0;" />
        <el-form label-position="right" label-width="auto" style="max-width:800px;margin:20px auto"
          class="demo-form-inline" ref="customerFormRef" :inline="true" :model="djDialog.customerForm" :rules="rules">
          <el-form-item label="客户姓名：" prop="customerName">
            <el-input placeholder="输入[客户姓名]" v-model="djDialog.customerForm.customerName" />
          </el-form-item>
          <el-form-item label="楼栋： " prop="buildingNo">
            <el-input readonly v-model="djDialog.customerForm.buildingNo" />
          </el-form-item>
          <el-form-item label="年龄：" prop="customerAge">
            <el-input v-model="djDialog.customerForm.customerAge" />
          </el-form-item>

          <el-form-item label="房间号： " prop="roomNo">
            <el-input readonly v-if="isShow" v-model="djDialog.customerForm.roomNo" />
            <el-select v-if="!isShow" v-model="djDialog.customerForm.roomNo" style="width:200px" @change="getBed"
              placeholder="请选择房间号">
              <el-option-group v-for="group in djDialog.roomList" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.roomNo" :label="item.roomNo"
                  :value="item.roomNo"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>

          <el-form-item label="性别：" prop="customerSex">
            <el-select v-model="djDialog.customerForm.customerSex" style="width:200px" placeholder="性别">
              <el-option v-for="item in djDialog.sex" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="床位号： " prop="bedId">
            <el-input readonly v-if="isShow" v-model="djDialog.customerForm.bedId" />
            <el-select v-if="!isShow" style="width:200px" v-model="djDialog.customerForm.bedId" placeholder="请选择床位">
              <el-option v-for="item in djDialog.bedList" :key="item.bedNo" :label="item.bedNo"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期： " prop="birthday">
            <el-date-picker @change="getAge" style="width:200px" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              v-model="djDialog.customerForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="入住时间： " prop="checkinDate">
            <el-date-picker style="width:200px" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              v-model="djDialog.customerForm.checkinDate" type="date" :disabled-date="disabledDate"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idcard">
            <el-input v-model="djDialog.customerForm.idcard" />
          </el-form-item>
          <el-form-item label="合同到期时间： " prop="expirationDate">
            <el-date-picker style="width:200px" v-model="djDialog.customerForm.expirationDate" type="date"
              format="YYYY/MM/DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate0"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="血型：" prop="bloodType">
            <el-input v-model="djDialog.customerForm.bloodType" />
          </el-form-item>
          <el-form-item label="联系电话：" prop="contactTel">
            <el-input v-model="djDialog.customerForm.contactTel" />
          </el-form-item>
          <el-form-item label="家属：" prop="familyMember">
            <el-input v-model="djDialog.customerForm.familyMember" />
          </el-form-item>
          <el-form-item label="身心状况： " prop="psychosomaticState">
            <el-input v-model="djDialog.customerForm.psychosomaticState" />
          </el-form-item>
        </el-form>
        <el-divider border-style="double" style="margin:0;" />
        <template #footer>
          <span class="dialog-footer" style="padding-top: 0px">
            <el-button type="primary" @click="djsave">保存</el-button>
            <el-button v-if="!djDialog.customerForm.id" type="primary" @click="resetForm">重置</el-button>
            <el-button @click="djcancel">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { listRoom } from "@/api/roomApi.js";
import { findBedByRoom } from "@/api/bedApi.js";
import { rzdjCustomer, getKhxxList, delCustomer, editCustomer } from "@/api/customerApi.js";

// 响应式引用
const customerFormRef = ref(null);
const khxxList = ref([]);
const isShow = ref(false); // 编辑和新增使用同一个模态框，isShow用来判别展示不同的标签
const btnFlag1 = ref(true);
const btnFlag2 = ref(false);
const btnFlag3 = ref(false);

// 分页属性封装
const page = reactive({
  total: 0,
  pageSize: 6,
  currentPag: 1,
  pagCount: 0
});

// 查询条件
const condition = reactive({
  customerName: "",
  pageSize: "1", // 默认第一页
  manType: "1" // 默认查询 1-自理老人 2-护理老人 3-历史老人
});

// 模态框数据
const djDialog = reactive({
  dialogVisible: false, // 模态框状态
  tops: "", // 模态框标题,
  customerForm: {
    id: "",
    bedId: "",
    bloodType: "O",
    buildingNo: "666",
    contactTel: "",
    customerAge: "",
    customerName: "",
    customerSex: "0",
    roomNo: "",
    idcard: "",
    psychosomaticState: "",
    familyMember: "", // 家属
    filepath: "@/assets/tou.png", // 头像路径固定
    birthday: "",
    checkinDate: "",
    expirationDate: ""
  },
  roomList: [],
  bedList: [],
  sex: [
    {
      value: "0",
      label: "男"
    },
    {
      value: "1",
      label: "女"
    }
  ]
});

// 校验规则
const rules = reactive({
  bedId: [{ required: true, message: "选择床位", trigger: "change" }],
  bloodType: [{ required: true, message: "请输入血型", trigger: "blur" }],
  contactTel: [
    { required: true, message: "请输入手机号", trigger: "blur" }
  ],
  customerAge: [
    { required: true, message: "请输入年龄", trigger: "blur" }
  ],
  customerName: [
    { required: true, message: "请输入客户姓名", trigger: "blur" }
  ],
  roomNo: [
    { required: true, message: "请选择房间号", trigger: "change" }
  ],
  idcard: [
    { required: true, message: "请输入身份证号", trigger: "blur" }
  ],
  familyMember: [
    { required: true, message: "请输入家属", trigger: "blur" }
  ],
  checkinDate: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change"
    }
  ]
});

// 计算属性
const indexMethod = computed(() => {
  return page.currentPag * page.pageSize - page.pageSize + 1;
});

// 监听入住时间变化
watch(
  () => djDialog.customerForm.checkinDate,
  (newvalue, oldvalue) => {
    // 当入住时间清空或者重新选择的入住时间超过当前结束时间时，清空结束时间
    if (
      !newvalue ||
      newvalue === "" ||
      newvalue > djDialog.customerForm.expirationDate
    ) {
      djDialog.customerForm.expirationDate = "";
    }
  }
);

// 时间限制（设置时间控件的隐藏日期）
const disabledDate = (time) => {
  // 入住时间只能是今日往后(包括今日)
  return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
};

const disabledDate0 = (time) => {
  // 获取入住时间
  let start = djDialog.customerForm.checkinDate;
  // elementplus格式化后需要转日期格式
  start = new Date(start);
  if (start && start !== "" && start !== "undifine" && start !== null) {
    return time.getTime() < start - 1000 * 60 * 60 * 24;
  }
  return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
};

// 登记: 点击"登记"
const dj = () => {
  isShow.value = false;
  // 查询房间列表
  getRoomList();
  // 打开登记模态框
  djDialog.dialogVisible = true;
  djDialog.tops = "入住登记";
};

// 编辑客户信息
const edit = (row) => {
  isShow.value = true;
  // 打开登记模态框
  djDialog.dialogVisible = true;
  djDialog.tops = "信息编辑";
  // nextTick确保赋值是发生在弹窗打开后
  nextTick(() => {
    // 初始化编辑数据
    djDialog.customerForm.id = row.id;
    djDialog.customerForm.bedId = row.bedId;
    djDialog.customerForm.birthday = row.birthday;
    djDialog.customerForm.bloodType = row.bloodType;
    djDialog.customerForm.buildingNo = row.buildingNo;
    djDialog.customerForm.contactTel = row.contactTel;
    djDialog.customerForm.customerAge = row.customerAge;
    djDialog.customerForm.customerName = row.customerName;
    djDialog.customerForm.customerSex = row.customerSex + ""; // 表格中获取的性别为0或1
    djDialog.customerForm.roomNo = row.roomNo;
    djDialog.customerForm.idcard = row.idcard;
    djDialog.customerForm.psychosomaticState = row.psychosomaticState;
    djDialog.customerForm.familyMember = row.familyMember;
    djDialog.customerForm.filepath = row.filepath;
    djDialog.customerForm.checkinDate = row.checkinDate;
    djDialog.customerForm.expirationDate = row.expirationDate;
  });
};

// 对话框关闭处理
const djhandleClose = () => {
  djcancel();
};

// 登记: 关闭模态框
const djcancel = () => {
  djDialog.dialogVisible = false;
  // 重置表单
  resetForm();
  // 将id初始为""
  djDialog.customerForm.id = "";
};

// 登记/编辑: 保存
const djsave = () => {
  customerFormRef.value.validate(valid => {
    if (valid) {
      // 通过id判断是添加还是编辑
      if (!djDialog.customerForm.id) {
        // 校验通过 api-入住登记
        rzdjCustomer(djDialog.customerForm).then(res => {
          if (res.flag) {
            ElMessage.success(res.message);
            // 刷新数据表格(回到最初查询状态)
            condition.manType = "1";
            condition.pageSize = "1"; // 回到第一页
            condition.customerName = "";
            fetchKhxxList();
            // 关闭弹出层
            djcancel();
          } else {
            ElMessage.error(res.message);
          }
        });
      } else {
        // 校验通过 api-编辑
        editCustomer(djDialog.customerForm).then(res => {
          if (res.flag) {
            ElMessage.success(res.message);
            // 刷新数据表格(保留查询状态)
            fetchKhxxList();
            // 关闭弹出层
            djcancel();
          } else {
            ElMessage.error(res.message);
          }
        });
      }
    } else {
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  if (customerFormRef.value) {
    customerFormRef.value.resetFields();
  }
};

// 自理老人
const selfCareMan = () => {
  btnFlag1.value = true;
  btnFlag2.value = false;
  btnFlag3.value = false;
  condition.manType = "1";
  condition.pageSize = "1"; // 回到第一页
  fetchKhxxList();
};

// 护理老人
const careMan = () => {
  btnFlag1.value = false;
  btnFlag2.value = true;
  btnFlag3.value = false;
  condition.manType = "2";
  condition.pageSize = "1"; // 回到第一页
  fetchKhxxList();
};

// 选择出生日期
const getAge = () => {
  let bir = djDialog.customerForm.birthday;
  if (bir && bir !== '' && bir !== 'undifine') {
    djDialog.customerForm.customerAge = Math.round((new Date() - new Date(bir)) / (1000 * 60 * 60 * 24 * 365));
  }
};

// 历史老人
const historyMan = () => {
  btnFlag1.value = false;
  btnFlag2.value = false;
  btnFlag3.value = true;
  condition.manType = "3";
  condition.pageSize = "1"; // 回到第一页
  fetchKhxxList();
};

// 点击查询
const query = () => {
  condition.pageSize = "1"; // 回到第一页
  fetchKhxxList();
};

// 点击删除 api-删除客户信息
const del = (row) => {
  ElMessageBox.confirm('此操作删除客户，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delCustomer({ id: row.id, bedId: row.bedId }).then(res => {
      if (res.flag) {
        ElMessage.success('删除成功!');
        // 重载表格
        fetchKhxxList();
      }
    });
  }).catch(() => {
    // 取消操作
  });
};

// 选中页码
const handleCurrentChange = (curPage) => {
  page.currentPag = curPage;
  condition.pageSize = curPage; // 参数pageSize是服务端接收页码参数名
  // 重新渲染表格
  fetchKhxxList();
};

// api-查询房间列表
const getRoomList = () => {
  listRoom().then(res => {
    // 构建房间列表数据(按楼层分组显示)
    let floor1 = res.data.filter((item) => {
      return item.roomFloor === "一楼";
    });
    let floor2 = res.data.filter((item) => {
      return item.roomFloor === "二楼";
    });
    djDialog.roomList = [
      {
        label: "一楼",
        options: floor1
      },
      {
        label: "二楼",
        options: floor2
      }
    ];
  });
};

// api-根据选择的房间查询床位
const getBed = () => {
  // 清空床位下拉列表
  djDialog.bedList = [];
  djDialog.customerForm.bedId = "";
  findBedByRoom({
    bedStatus: 1,
    roomNo: djDialog.customerForm.roomNo
  }).then(res => {
    djDialog.bedList = res.data;
  });
};

// api-查询客户信息列表-分页
const fetchKhxxList = () => {
  getKhxxList(condition).then(res => {
    khxxList.value = res.data.records;
    page.total = res.data.total; // 总记录数
    page.pageSize = res.data.size; // 每页显示条数
    page.currentPag = res.data.current; // 当前页码
    page.pagCount = res.data.pages; // 总页数
  });
};

// 页面加载时获取客户信息列表
onMounted(() => {
  fetchKhxxList();
});
</script>

<style scoped>
.activeBtn {
  color: #1890ff;
  background: rgb(232, 244, 255);
}
</style>